
<template>
  <a-alert type="success" style="margin-bottom: 10px">请务必将每一个字段的"字段名词"填写完整!!!</a-alert>
  <BhTable
      row-key="column_name"
      :data="data"
      :columns="columns"
      :loading="loading"
      :scroll="{ x: '100%', y: 800, minWidth: 900 }"
      :pagination="false"
      :draggable="{ type: 'handle', width: 40 }"
      :disabled-tools="['setting', 'refresh','fullscreen','medium']"
      :disabled-column-keys="['column_name']"
      @change="handleChangeSort"
  >
    <template #columnName="{ record }">
      {{record.column_name}}
    </template>
    <template #comment="{ record }">
      {{record.column_comment}}
    </template>
    <template #showInList="{ record }">
      <a-checkbox v-model="record.is_show" value="true"/>
    </template>
    <template #title="{ record }">
      <a-input v-model="record.title" />
    </template>
    <template #column_as="{ record }">
      <a-input v-model="record.column_as" />
    </template>
    <template #width="{ record }">
      <a-input v-model="record.width" />
    </template>
    <template #dictCode="{ record }">
      <BhSelector
          v-model="record.dict_code"
          :placeholder="'请选择字典类型'"
          :source="dictList"
          :option-value="'code'"
          :option-label="'name'"
      ></BhSelector>
    </template>
  </BhTable>

</template>


<script setup lang="ts">
import type {TableInstanceColumns} from '@/components/BhTable'
import {type FieldConfigResp} from "@/api/system/code";
import {useLoading} from "@/hooks/modules/useLoading";
import {type DictResp} from "@/api/system/dict";
const {loading, setLoading} = useLoading();
const props = withDefaults(
    defineProps<
        Partial<{
          modelValue: FieldConfigResp[];
          dictList: DictResp[]
        }>
    >(),
    {

    }
);
const emits = defineEmits(['update:modelValue']);
let data = computed({
  get() {
    return props.modelValue;
  },
  set(e) {
    emits('update:modelValue', e);
  },
});
// Table 字段配置
const columns: TableInstanceColumns[] = [
  {title: '字段名', slotName: 'columnName',width: 150, align: 'center'},
  {title: '描述', slotName: 'comment', width: 150, align: 'center'},
  {title: '列表显示', slotName: 'showInList', width: 60, align: 'center'},
  {title: '字段名词', slotName: 'title', width: 150, align: 'center'},
  {title: '字段命名', slotName: 'column_as', width: 150, align: 'center'},
  {title: '宽度', slotName: 'width', width: 150, align: 'center'},
  {title: '关联字典', slotName: 'dictCode',align: 'center'},
]
const handleChangeSort = (newDataList: FieldConfigResp[]) => {
  let sort=0;
  newDataList.map((s) => s.sort=++ sort)
  data.value =newDataList
}

//字段检查
const onValidate =  async() => {
  const  error=ref('');
  for (let s of data.value) {
    if(s.title === ''){
      error.value=  s.column_name+'字段名词不能为空'
       break;
    }
  }
  return error.value
}

defineExpose({onValidate})
</script>
<style scoped lang="less">

</style>